<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型-填充</title>
    <style>
        /* 对于 div 如果没有设置宽度，则以浏览器的视窗的宽度作为宽度*/
        /*高度 是内容撑开*/
        .box1{
            border: 1px solid red;
        }
        .w500{
            width: 500px;
        }
        .w400{
            width: 400px;

        }

    </style>
</head>
<body>

    <h2>文档流：元素排布规则（1. 块级 2. 内敛）</h2>

    <p>块级： 1. 独占一行(即使设置的宽度没有占据整行，也要霸占整行) 2. 从上到下</p>
    <p>常见的块级元素： div  ul li  h1</p>

    <p>内敛：1. 不会独占一行 2. 从左到右</p>
    <p>常见的内敛元素： span 小的文本标签 b strong em i a</p>

    <div class="box1 w500">
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        <br>
        Lorem ipsum dolor sit amet, consectetur.
    </div>

    <div class="box1 w400">
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        <br>
        Lorem ipsum dolor sit amet, consectetur.
    </div>

    <i>斜体</i><b>加粗</b><a href="https://www.baidu.com">百度</a>

</body>
</html>